<template>
	<view class="con">
		<!-- <image v-if="picmode" :src="backgroundImage"  class="back"></image>
		<view v-else="" :style="{'background-color':backgroundColor}" class="back"></view> -->
		<view class="stage" @touchstart="updateStart" @touchmove="updateMove" @touchend="updateEnd">
			<view class="box" :style="{transform:'rotateY('+ss+'deg)'}" :class="[vtouch&&touching?'':'slow']">
				<view :class="img.istrue==true?'op0':''" v-for="(img,index) in imagess" :key="index" :style="{transform: 'rotateY('+(index*de)+'deg) translateZ('+wi+')'}">
					<view class="imgbg flex">
						<view style="position:relative;">
							<view style="position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;">
								{{img.name_one}}
							</view>
							<image style="width: 20px;height: 50px;" :src="img.preview_image"  @tap="tran(index)" :class="[vertical?'hrect-image':'vrect-image']"></image>
						</view>
						<view style="position:relative;">
							<view style="position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;">
								{{img.name_two}}
							</view>
							<image style="width: 20px;height: 50px;right: 0;" :src="img.preview_image"  @tap="tran(index)" :class="[vertical?'hrect-image':'vrect-image']"></image>
						</view>
						
						
					</view>
					
					<!-- <view class="title" :style="{'background-color':backcolor,'color':fontcolor,'text-align':titleAlign,top:titleBottom?imgh:'0px'}">{{img.title}}</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hj3-display-images",
		props: {
			imagess: {
				type: Array,
			},
			vertical: {
				type: Boolean,
				default: true
			},
			vtouch: {
				type: Boolean,
				default: true
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			interval: {
				type: Number,
				default: 100
			},
			clockwise: {
				type: Boolean,
				default: false
			},
			titleBottom: {
				type: Boolean,
				default: false
			},
			backcolor: {
				type: String,
				default: 'rgba(0,0,0,0.2)'
			},
			fontcolor: {
				type: String,
				default: 'black'
			},
			titleAlign: {
				type: String,
				default: 'center'
			},
			background: String
		},
		computed: {
			picmode: function() {
				return !!this.backgroundImage
			},
			de: function() {
				return 360 / this.imagess.length
			},
			wi: function() {
				return uni.upx2px(260) + 'px';
			},
			btm: function() {
				if (this.vertical) {
					if (this.titleBottom)
						return uni.upx2px(320) + 'px';
					return uni.upx2px(240) + 'px';
				}
				if (this.titleBottom)
					return uni.upx2px(820) + 'px';
				return uni.upx2px(740) + 'px';
			},
			bgh: function() {
				if (this.vertical) {
					if (this.titleBottom)
						return uni.upx2px(620) + 'px';
					return uni.upx2px(540) + 'px';
				}
				if (this.titleBottom)
					return uni.upx2px(1600) + 'px';
				return uni.upx2px(1520) + 'px';
			},
			imgh: function() {
				if (this.vertical) return uni.upx2px(135) + 'px';
				else return uni.upx2px(416) + 'px';
			},
			hasTitle: function() {
				return this.imagess.some(ele => ele.title)
			},
			imagesMap: function() {
				if (!Array.isArray(this.imagess)) {
					console.warn('图片输入必须是地址数组，或者是图片对象')
					return []
				}
				var im = []
				this.imagess.forEach((ele, index) => {
					im.push({
						src: ele.preview_image,
						title: ele.title || '',
						titleBottom: ele.titleBottom || false,
						istrue:false,
						name_one:ele.name_one,
						name_two:ele.name_two
					})
					// if (typeof(ele) === 'string')
					// 	im.push({
					// 		preview_image: ele
					// 	})
					// else {
					// 	let t = Object.create(null)
					// 	if (!ele.preview_image) {
					// 		console.warn(`第${index}个图片对象缺少src属性`)
					// 	} else {
							
					// 	}
					// }
				})
				return im
			}
		},
		data() {
			return {
				current: 0,
				ss: 0,
				start: null,
				last: null,
				touching: false,
				temp: 0,
				backgroundColor: 'rgba(0,0,0,0)',
				backgroundImage: null,
				index1:0
			}
		},
		methods: {
			tran: function(index) {
				let old = this.current
				this.current = index;
				let c = (index - old) * this.de
				if (Math.abs(c) > 180) {
					if (c > 0) c = Math.abs(c) - 360
					else c = 360 - Math.abs(c)
				}
				this.ss += -c;
				this.$emit('itap', index)
			},
			updateStart: function(e) {
				if (this.vtouch) {
					this.touching = true;
					this.start = this.ss;
					this.last = e.touches[0].pageX;
				}
			},
			updateMove: function(e) {
				if (this.vtouch) {
					let np = e.touches[0].pageX;
					let tc = np - this.last;
					this.last = np;
					this.ss += tc;
				}
			},
			updateEnd: function(e) {
				if (this.vtouch) {
					this.touching = false;
					let fc = this.ss - this.start;
					let c = Math.round(fc / this.de);
					let index = (this.current - c) % 8;
					this.current = index > 0 ? index : (8 + index)
					this.ss = this.start + c * this.de;
					this.start = null;
				}
			},
			autoPlay: function() {
				console.log(this.index1,'ggggggggggggg')
				setTimeout(() => {
					if(this.index1==1){
						this.imagess[3].istrue=true
						this.imagess[4].istrue=true
						this.imagess[5].istrue=true
					}
					if(this.index1==2){
						this.imagess[1].istrue=false
						this.imagess[2].istrue=false
						this.imagess[3].istrue=false
						
						this.imagess[4].istrue=false
						this.imagess[5].istrue=true
						this.imagess[0].istrue=true
						// return false
					}
					if(this.index1==3){
						this.imagess[1].istrue=true
						this.imagess[2].istrue=false
						this.imagess[3].istrue=false
						
						this.imagess[4].istrue=false
						this.imagess[5].istrue=false
						this.imagess[0].istrue=true
						// return false
					}
					if(this.index1==4){
						this.imagess[1].istrue=true
						this.imagess[2].istrue=true
						this.imagess[3].istrue=false
						
						this.imagess[4].istrue=false
						this.imagess[5].istrue=false
						this.imagess[0].istrue=false
						
						// return false
					}
					if(this.index1==5){
						
						this.imagess[4].istrue=false
						this.imagess[5].istrue=false
						this.imagess[0].istrue=false
						this.imagess[1].istrue=false
						this.imagess[2].istrue=true
						this.imagess[3].istrue=true
						// this.index1=0
						// return false
					}
					
					if(this.index1==6){
						this.imagess[3].istrue=false
						this.imagess[4].istrue=true
						this.imagess[5].istrue=true
						this.imagess[0].istrue=false
						this.imagess[1].istrue=false
						this.imagess[2].istrue=false
						this.index1=0
						// return false
					}
					
					if (this.start === null) {
						if (this.clockwise)
							this.ss -= this.de;
						else
							this.ss += this.de;
					}
					this.index1++
					// this.imagesMap[index+2].istrue=true
					// this.imagesMap[index+3].istrue=true
					// this.imagesMap[index+4].istrue=true
					this.autoPlay()
				},700)
			}
		},
		created: function() {
			this.autoPlay()
			// if (this.images.length < 5 || this.images.length > 10)
			// 	console.warn("图片最好控制在5-9张，可以通过处理images实现")
			// if (this.autoplay)
				this.imagess[3].istrue=true
				this.imagess[4].istrue=true
				this.imagess[5].istrue=true
			// if (this.background.slice(0, 3) == 'rgb' || this.background.slice(0, 1) == '#') {
			// 	this.backgroundColor = this.background
			// } else {
			// 	this.backgroundImage = this.background
			// }
		}
	}
</script>

<style scoped="" lang="scss">
	.op0{
		opacity: 0;
	}
	.con {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.stage {
			display: block;
			position: absolute;
			perspective: 800upx;
			z-index: 444;
			top:60px
			// background-color: blue;
		}

		.back {
			position: absolute;
			width: 100%;
		}

		.box {
			transform-style: preserve-3d;
			position: relative;
			width: 240upx;
			// background: #f0f0f0;
			.title {
				position: absolute;
				width: 200upx;
				height: 36upx;
				font-size: 28upx;
			}

			.imgbg {
				z-index: 0;
				position: absolute;
				width: 70px;
				left: 50%;
				margin-left: -35px;
				text-align: center;
				// left: 0;
				
			}

			.vrect-image {
				height: 416upx;
			}

			.hrect-image {
				height: 135upx;
			}
		}

		.slow {
			transition-duration: 1s;
		}
	}
</style>
